<template>
  <div class="container">
    <div>
      <!-- <div class="title m_top30">支付方式</div> -->
      <div class="pay_way">
        <div
          v-for="(item, index) in pay_way_list"
          :key="index"
          @click="pay_way = index"
          :class="pay_way == index ? 'select_pay_way' : ''"
        >
          <svgBtn :icon="item.icon" style="font-size: 24px"></svgBtn>
          <span>{{ item.name }}</span>
          <svgBtn
            class="select_top_right"
            icon="select_top_right"
            style="font-size: 22px"
            v-if="pay_way == index"
          ></svgBtn>
        </div>
      </div>
      <div class="tc">
        应付金额：<span class="fs_20 fw" style="color: #3580eb"
          >￥{{ props.amount }}</span
        >
      </div>
      <div v-if="pay_way == 0" class="tc" style="height: 355px">
        <div class="fs_18 c_666 m_20_0">
          <span class="fs_14 c_999">可用余额：</span>
          {{ Balance_info.amount }}
        </div>
        <p class="fs_12 tc c_999">( ：赠送金额不可用于购买多组织管理 )</p>
        <span style="color: #ee5656" v-if="Balance_info.amount < props.amount"
          >余额不足，请充值</span
        >
      </div>
      <div v-else>
        <div class="tc">
          <img
            src="@/assets/img/index.png"
            style="width: 200px; height: 200px; margin: 10px auto"
            alt=""
          />
        </div>
        <div v-if="pay_way == 1" class="flex_cc">
          <svgBtn
            icon="weixin"
            style="font-size: 24px; margin-right: 5px"
          ></svgBtn>
          微信支付
        </div>
        <div v-if="pay_way == 2" class="flex_cc">
          <svgBtn
            icon="zhifubao"
            style="font-size: 24px; margin-right: 5px"
          ></svgBtn>
          支付宝支付
        </div>
        <el-form>
          <el-form-item label="交易单号">
            <el-input disabled v-model="pay_code"></el-input>
          </el-form-item>
          <el-form-item label="商户单号">
            <el-input disabled v-model="shopping_code"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div class="m_10_0 tr">
        <el-button @click="$emit('close_pay_box')">取消支付</el-button>
        <span v-if="pay_way == 0" class="m_left10">
          <el-button
            @click="router.push({ name: 'recharge' })"
            v-if="Balance_info.amount < props.amount"
            type="primary"
            >前往充值</el-button
          >
          <el-button v-else @click="pay" type="primary">确认支付</el-button>
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import svgBtn from '@/components/svg_button.vue'
import { ElMessage } from 'element-plus'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import EventBus from '@/utils/EventBus'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = useStore()
const props = defineProps({
  amount: Number,
  itemId: String,
})
const Balance_info = ref(
  computed(() => {
    return store.state.balance_info
  })
)
const pay_code = ref(123123123)
const shopping_code = ref(123123123213123)
const pay_way = ref(0)
const pay_way_list = ref([
  { name: '余额支付', icon: 'yue_icon' },
  { name: '微信支付', icon: 'weixin' },
  { name: '支付宝支付', icon: 'zhifubao' },
])
const btn_loading = ref(false)
const order_id = ref()
const pay = () => {
  btn_loading.value = true
  creat_itemOrder()
}
const creat_itemOrder = () => {
  axios
    .request({
      url: serviceApi.create_itemOrder,
      method: 'post',
      data: { itemId: props.itemId },
    })
    .then((res) => {
      console.log(res)
      order_id.value = res.data
      submit_itemOrder()
    })
    .catch((err) => {
      ElMessage.error(err)
      btn_loading.value = false
    })
}
const submit_itemOrder = () => {
  axios
    .request({
      url: serviceApi.submit_itemOrder,
      method: 'post',
      data: {
        id: order_id.value,
        itemList: [
          {
            payWay: 1,
            totalFee: props.amount,
          },
        ],
      },
    })
    .then((res) => {
      pay_itemOrder()
    })
    .catch((err) => {
      ElMessage.error(err)
      btn_loading.value = false
    })
}
const pay_itemOrder = () => {
  axios
    .request({
      url: serviceApi.pay_itemOrder,
      method: 'post',
      data: {
        payOrderId: order_id.value,
      },
    })
    .then((res) => {
      btn_loading.value = false
      ElMessage.success('支付成功！')
      Balance_info.value.amount = Balance_info.value.amount - props.amount
      setTimeout(() => {
        EventBus.emit('pay_succ')
      }, 2000)
    })
    .catch((err) => {
      ElMessage.error(err)
      btn_loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.pay_way {
  display: flex;
  align-items: baseline;
  margin: 15px 10px;
  > div {
    margin-right: 30px;
    border: 1px solid #c3c3c3;
    height: 50px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 2px;
    cursor: pointer;
    span {
      margin-left: 6px;
    }
  }
  .select_pay_way {
    background-color: #f0f6ff;
    border: 1px solid #3580eb;
  }
  .select_top_right {
    position: absolute;
    top: -1px;
    right: 0;
    height: 22px;
    line-height: 22px;
  }
}
.container > div {
  margin: 0 auto;
}
</style>
